<template>
    <div class="fileManage">
        <Left :state="state"></Left>
        <div class="middle">
            <Top @Down="Down"></Top>
            <p class="title1">文件管理</p>
            <p class="title2">一段关于文件管理的描述</p>
            <div class="content">
                <div class="content-top">
<!--                    <p>已选1项</p>-->
                    <div class="content-top-button">
                        <el-upload
                                :show-file-list="false"
                                class="upload-demo"
                                action="http://192.168.3.21:8888/file_op/upload/"
                                :on-progress="handlefile"
                                :on-success="handleSuccess"
                                accept=".exe,.py"
                                :data="fileData"
                        >
                            <button class="add" >点击上传</button>
                        </el-upload>
                        <button class="delete" @click="delFile">删除</button>
                    </div>
                </div>
                <div class="table-head">
<!--                    <input type="checkbox"   name="fatherCheck"  v-model="check" @click="checkAll"/>-->
                    <span class="name">名称</span>
                    <span class="operation">操作</span>
                </div>
                <div class="text">
                <div class="file" v-for="(item,index) in newFileList" :key="index" style="min-height: 50px">
                     <div >
                         <input type="checkbox"  name="items"  :value="item.id" v-model="check" class="state"/>
                         <span class="file-name">{{item.filename}}</span>
                     </div>
                    <div class="aaa">
                        <img src="../../assets/image/fileManageImg/delete.png" alt="" class="ico"  @click="delFile">
                        <span class="file-delete" @click="delFile">删除</span>
                    </div>
                </div>
                </div>
            </div>
            <div class="page">
                <div class="page-box1"><img src="../../assets/image/showImg/left.png" alt="" @click="upleft"></div>
                <div class="page-box1"
                     v-for="(item,index) in length "
                     :key="item"
                     @click="fun(index+1)"
                >{{item}}</div>
                <div class="page-box1"><img src="../../assets/image/showImg/right.png" alt="" @click="upright"></div>
                <div class="page-box2">5条/页</div>
                <span>跳至</span>
                <input v-model="page" class="page-box3"   @keydown="enterToLogin"/>
                <span>页</span>
            </div>
            <Bottom></Bottom>
        </div>
    </div>
</template>

<script>
    import Top from '../top/top'
    import Left from '../left/left'
    import Bottom from '../bottom/bottom'
    import axios from 'axios'


    export default {
        name: "fileManage",
        components:{
            Left,
            Top,
            Bottom
        },
        data(){
            return{
                check:[],
                fileList: [], // // 上传文件列表
                upFile: [], // 文件File 上传参数
                upFileList: [], // 文件File列表 上传参数
                newFileList: [],
                state:2,
                fileData:{},
                page:1 ,
                length:[],
                maxpage:'',
                num:0
            }
        },

        methods:{
            Down(){
                axios({
                    url:'http://192.168.3.21:8888/user/report/',
                    method:'get',
                }).then(res =>{
                    console.log(res);
                    let a = document.createElement('a');
                    a.href = res.config.url;
                    // a.target = '_blank';//在新窗口打开
                    a.click();
                })
            },

            checkAll(){
                var items = document.getElementsByName("items")
                if(this.num ===0){
                    for(var i=0; i<items.length ; i++){
                        items[i].checked = true
                    }
                    this.num = 1
                }
                else {
                    for(var t=0; t<items.length ; t++){
                        items[t].checked = false
                    }
                    this.num = 0
                }
            },

            handlefile(event, file, fileList) {
                console.log(event, 11, file, 111, fileList);
                this.fileData = {
                    name: file.raw.name,
                };
            },

            handleSuccess(){
                // this.getfiles()
                this.$router.go(0)
            },
            delFile(){
                console.log(this.check);
                var a=  this.check.toString()
                axios({
                    method: 'get',
                    url:'http://192.168.3.21:8888/file_op/delete/'+a,
                }).then(res =>{
                    console.log(res);



                    // this.$alert('删除失败', '标题名称', {
                    //     confirmButtonText: '确定',
                    // });
                    this.$router.go(0)
                })
            },
            getFile(){
                axios({
                    method: 'get',
                    params:{
                        page:this.page
                    },
                    url:'http://192.168.3.21:8888/node_bmp/node_fileshow/'
                }).then(res =>{
                    this.maxpage=res.data.nums_page
                    if(this.length!==''){
                        this.length.length=0
                    }
                    for(var t=0;t<res.data.nums_page;t++){
                        this.length.push(t+1)
                    }

                    console.log(res);
                    if(this.newFileList!==''){
                        this.newFileList.length=0
                    }

                    for(var i=0 ;i<res.data.data.length;i++){
                        this.newFileList.push({});
                        this.newFileList[i].filename= res.data.data[i].filename;
                        this.newFileList[i].id= res.data.data[i].id
                    }
                    console.log(this.newFileList)

                })
            },

            fun(val){
                this.page = val
                this.getFile()
            },
            upleft(){
                if(this.page ===1){
                    console.log("左边没有了");
                    return;
                }else{
                    this.page-=1
                    this.getFile()
                }
            },
            upright(){
                if(this.page === this.maxpage){
                    console.log("右边没有了");
                    return;
                }else{
                    this.page+=1
                    this.getFile()
                }
            },
            enterToLogin () {
                this.getFile()
            },


        },
        mounted() {
          this.getFile()
        }
    }
</script>

<style lang="less">
    .fileManage{
        position: absolute;
        width: 1920px;
        height:965px;
        background: #F5F7F9;
        opacity: 1;
        display: flex;
        .middle{
            width: 1580px;
            margin-left: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .title1{
                margin-top: 51px;
                align-self: flex-start;
                font-size: 28px;
                font-family: PingFang SC;
                font-weight: 800;
                color: #000000;
                opacity: 1;
            }
            .title2{
                margin-top: 5px;
                align-self: flex-start;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 400;
                color: #000000;
                opacity: 1;
            }
            .content{
                margin-top: 24px;
                width: 1580px;
                height: 650px;
                background: #FFFFFF;
                box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
                opacity: 1;
                border-radius: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
                .content-top{
                    margin-top: 22px;
                    display: flex;
                    width: 1524px;
                    justify-content: space-between;
                    p{
                        font-size: 16px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #000000;
                        opacity: 1;
                    }
                    .content-top-button{
                        display: flex;

                        .el-upload-list__item {
                            transition: none !important;
                        }

                        .add{
                            width: 110px;
                            height: 42px;
                            background: #0E8BF8;
                            border-radius: 10px;
                            color: #ffffff;
                            border: none;
                            outline: none;
                        }
                        .delete{
                            margin-left: 12px;
                            width: 78px;
                            height: 42px;
                            background: #FA2525;
                            color: #ffffff;
                            border-radius: 10px;
                            border: none;
                            outline: none;
                        }
                    }
                }
                .table-head{
                    min-height: 50px;
                    margin-top: 22px;
                    width: 1524px;
                    height: 50px;
                    background: #F5F7F9;
                    opacity: 1;
                    border-radius: 10px;
                    display: flex;
                    align-items: center;
                    input{
                        width: 20px;
                        height: 20px;
                        margin-left: 20px;
                    }
                    .name{

                        font-size: 16px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #000000;
                        opacity: 1;
                        margin-left: 50px;
                    }
                    .operation{
                        font-size: 16px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #000000;
                        opacity: 1;
                        margin-left: 1329px;
                    }
                }
                .text{
                    overflow: auto;
                    overflow-x: hidden;
                    overflow-y: scroll;

                }
                .text::-webkit-scrollbar{
                    display: none;
                }

                .file{
                    overflow:auto;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 16px;
                    margin-bottom: 16px;
                    width: 1524px;
                    height: 50px;
                    background: #8cc5ff;
                    border-radius: 10px;
                    .aaa{
                        display: flex;
                        align-items: center;
                    }
                    .state{
                        margin-left: 20px;
                        width: 20px;
                        height: 20px;
                    }
                    .file-name{
                        white-space:nowrap;
                        font-size: 16px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #000000;
                        opacity: 1;
                        margin-left: 10px;
                    }
                    .ico{

                        width: 15px;
                        height: 16px;

                    }
                    .file-delete{
                        margin-right: 60px;
                        white-space:nowrap;
                        font-size: 16px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #FB2525;
                        opacity: 1;
                        margin-left: 10px;
                        cursor: pointer;
                    }

                }

            }
            .page{
                width: 390px;
                display: flex;
                align-self: flex-end;
                justify-content: space-around;
                align-items: center;
                /*margin-bottom: 94px;*/
                margin-top: 16px;
                .page-box1{
                    width: 32px;
                    height: 32px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
                    opacity: 1;
                    border-radius: 5px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .page-box2{
                    width: 82px;
                    height: 32px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
                    opacity: 1;
                    border-radius: 5px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #000000;
                    opacity: 1;
                }
                .page-box3{
                    width: 48px;
                    height: 32px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
                    opacity: 1;
                    border-radius: 5px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #000000;
                    opacity: 1;
                }
                input{
                    outline: none;
                    border: none;
                    text-indent: 20px;
                }
                span{
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #000000;
                    opacity: 1;
                }
            }
        }
    }

</style>
